<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="layout/header">
</head>
<body>
<div class="layui-fluid">
    <!--拖拽上传-->
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>
</div>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="sendTemplate">发送通知</a>
</script>

<script type="text/html" id="imgTpl">
        <img class="head" src="{{d.avatarUrl}}"  style="width:30px; height:30px;">
</script>
<script  th:inline="none">
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        upload.render({
            elem: '#test10'
            ,multiple: true
            ,accept:"file"
            ,url: '/api/upload/file' //改成您自己的上传接口
            ,done: function(res){
                console.log(res);
                layer.msg('上传成功');
                $(".layui-fluid").append("<img class='head' src='"+res.data.src+"'style='width:100%'>");
            }
        });
    });
</script>
</body>
</html>